import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Search, Grid, Mask } from 'antd-mobile'
import actions from '../../store/actions';
import { getSearchList } from '../../api'
import List from '../../components/List'
class Index extends Component {
  state = {
    visible: false,
    list: [],
    page: 5
  }
  async getSearchList(value) {
    const resp = await getSearchList({ value })
    this.setState({
      list: resp.data.data
    })
  }
  handleSearch(value) {
    const action = actions.addSearchHistory(value)
    this.props.dispatch(action)

    this.getSearchList(value)

    this.setVisible(false)

  }
  setVisible(flag) {
    this.setState({
      visible: flag
    })
  }
  componentDidMount() {
    this.getSearchList()
  }
  render() {
    const { searchHistory } = this.props
    const { visible, list , page} = this.state
    console.log(searchHistory);
    return (
      <div>
        <Search placeholder='请输入内容' onFocus={ () => this.setVisible(true) }/>
        <List list={ list.slice(0, page) }></List>
        {/* 18.实现搜索列表点击加载更多功能 */}
        <button onClick={ () => this.setState({ page: page + 5 }) }>加载更多 { page }</button>
        {/* 15.点击搜索框显示搜索蒙层，实现模糊搜索并通过状态管理容器保存搜索历史 */}
        <Mask visible={visible}>
          <Search placeholder='请输入内容' onSearch={ (value) => this.handleSearch(value) }/>
          <Grid columns={4} gap={6}>
              {
                searchHistory.map((v, i) => {
                  return (
                    <Grid.Item key={i}>
                    <b className="b">{v}</b>
                    </Grid.Item>
                  )
                })
              }
          </Grid>
        </Mask>
       
      </div>
    );
  }
}

const mapState = (state) => {
  return { ...state }
}
const mapDiapatch = dispatch => {
  return { dispatch }
}
export default connect(mapState, mapDiapatch)(Index);